<template>
  <div class="layout-main">
    <img class="layout-banner" src="../assets/images/bg1.jpg" alt="" />

    <div class="intro-wrapper">
      <div class="intro-text">
        <h2>公司简介</h2>
        <p style="margin-top: 18px">
          某某科技有限公司是专门从事大屏显示系统的研发、生产与销售，产品面向整个亚太地区。公司始终以产品质量为核心，服务上为已任，作为国内的户外广告机及应用解决方案的供应商，始终站在液晶显示行业发展的前沿，并长期与国际知名液晶品牌厂商保持良好的战略合作伙伴关系。
          公司主营产品有：液晶广告机、触摸一体机、液晶拼接屏、液晶监视器、户外广告机等商显产品产品尺寸覆盖10.1-98寸，产品采用优质的原材料并按照国家标准研发，具备了精外观、低功耗高品质、高音质、高画质等特点。产品质量可靠并成功通过国家强制性CCC认证、CE认证、FCC认证、ROHS认证等，保证产品性能和安全。产品广泛用于政府、医院、车站、商业楼宇、超市、地铁、酒店、教育、地产、文化传媒等行业。
        </p>
      </div>
      <img src="../assets/images/bg.jpg" />
    </div>

    <div class="intro-wrapper-2">
      <img src="../assets/images/bg.jpg" />
      <div class="intro-text-2">
        <h3>我们的优势</h3>
        <p>
          某某户外广告机产品覆盖传媒、商业、安防、教育等多个领域。我们拥有一批从事智能显示设备、物联网设备研发的工程师及生产线，更好地保障了公司多媒体液晶显示设备的优良性能和高品质。我们先后通过了CE认证、FCC认证、RoHS认证、CCC认证、ISO9001-2008等认证，严苛的质量控制体系确保产品可靠，健全的研发体系保障产品的持续创新。为了给客户提供更好的产品和服务不断拓展和完善营销渠道，已建成行业内强大的营销渠道服务网络。
        </p>
      </div>
    </div>

    <div class="intro-wrapper-3">
      <h3>合作伙伴</h3>
      <div class="cooperation-list">
        <div v-for="item in 10" class="cooperation-list--item">
          <div class="icon-wrapper"></div>
          <span>腾讯</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({});
</script>
<style lang="scss" scoped>
.layout-main {
  width: 100%;
  .intro-wrapper {
    margin-top: 50px;
    display: flex;
    padding: 0 100px 0 200px;

    h2 {
      font-size: 24px;
      color: #333;
    }

    p {
      margin-right: 100px;
      color: #999;
      font-size: 14px;
      line-height: 28px;
    }

    img {
      margin-left: auto;
      width: 528px;
      height: 388px;
    }
  }

  .intro-wrapper-2 {
    margin-top: 70px;
    width: 100%;
    position: relative;
    img {
      width: 50%;
      height: 586px;
    }

    .intro-text-2 {
      position: absolute;
      width: 60%;
      height: 386px;
      background: #e8e8e8;
      right: 0;
      top: 100px;
      box-sizing: border-box;
      padding: 60px;

      h3 {
        font-size: 34px;
      }

      p {
        margin-top: 32px;
        line-height: 28px;
        font-size: 14px;
        color: #333;
      }
    }
  }

  .intro-wrapper-3 {
    width: 100%;
    margin-top: 70px;
    box-sizing: border-box;
    padding: 0 200px;

    h3 {
      font-size: 34px;
      width: 100%;
      text-align: center;
    }

    .cooperation-list {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .cooperation-list--item {
        margin-bottom: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 32px;
        justify-content: center;

        .icon-wrapper {
          height: 100px;
          width: 100px;
          background-color: #99a9bf;
          border-radius: 50%;
        }
        span:nth-of-type(1) {
          color: #2b2b2b;
          line-height: 36px;
        }
      }
    }
  }
}
</style>
